<template>
  <q-cascader
    v-model="_value"
    :props="propsOption"
    :options="options"
    filterable
    clearable
  />
</template>

<script>
import { defineComponent, computed } from '@vue/composition-api';

export default defineComponent({
  name: 'RegionSetter',
  props: {
    value: {
      type: Number,
      default: null,
    },
    onChange: {
      type: Function,
      default: () => {},
    },
    options: {
      type: Array,
      default: () => [],
    },
  },
  setup(props) {
    const propsOption = {
      label: 'name',
      value: 'id',
      checkStrictly: true,
    };
    return {
      _value: computed({
        get: () => props.value,
        set: (value) => props.onChange(value),
      }),
      propsOption,
    };
  },
});
</script>
